<template>
  <div>
    <a-modal v-model:visible="visible" @cancel="handleCancel">
      <template #title> 酒类管理 </template>
      <a-form :model="form" :rules="rules" ref="formRef" @submit="handleSubmit">
        <a-form-item field="wine_name" label="名称" validate-trigger="blur">
          <a-input v-model="form.wine_name" placeholder="请输入酒类名称" />
        </a-form-item>
        <a-form-item field="wine_millilter" label="瓶/ml">
          <a-input
            v-model="form.wine_millilter"
            placeholder="请输入一瓶多少毫升"
            ><template #append> ml </template></a-input
          >
        </a-form-item>
        <a-form-item field="wine_alcohol" label="瓶/酒精">
          <a-input v-model="form.wine_alcohol" placeholder="请输入酒精含量"
            ><template #append> % </template></a-input
          >
        </a-form-item>
        <a-form-item field="wine_case" label="瓶/箱">
          <a-input v-model="form.wine_case" placeholder="请输入每箱多少瓶" />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-button type="primary" @click="savewinetype">确定</a-button>
        <!-- <a-button type="primary" @click="$refs.formRef.resetFields()">Reset</a-button> -->
      </template>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { saveWine } from '@/api/winetype';
import { Message } from '@arco-design/web-vue';

const props = defineProps({
  getList: {
    type: Function,
  },
});
const visible = ref(false);
const form = reactive({
  wine_id: '',
  wine_name: '',
  wine_millilter: '',
  wine_alcohol: '',
  wine_case: '',
});
const formRef = ref();

const handleSubmit = ({ values, errors }) => {
  console.log('values:', values, '\nerrors:', errors);
};
const savewinetype = async () => {
  formRef.value.validate().then(async (res) => {
    if (res === undefined) {
      form.wine_case = parseInt(form.wine_case);
      const { data, code, message } = await saveWine(form);
      Message.success(message);
      if (code === 200) {
        visible.value = false;
        formRef.value.resetFields();
        props.getList(); // 重新获取数据
      }
    }
  });
};

const openModal = (record) => {
  if (record && record.wine_id) {
    form.wine_id = record.wine_id;
    form.wine_name = record.wine_name;
    form.wine_millilter = record.wine_millilter;
    form.wine_alcohol = record.wine_alcohol;
    form.wine_case = record.wine_case;
  }
  visible.value = true;
};
const rules = {
  wine_name: [
    {
      required: true,
      message: '请输入酒类名称',
    },
  ],
  wine_millilter: [
    {
      required: true,
      message: '请输入一瓶多少毫升',
    },
  ],
  wine_alcohol: [
    {
      required: true,
      message: '请输入酒精含量',
    },
  ],
  wine_case: [
    {
      required: true,
      message: '请输入一箱多少瓶',
    },
  ],
};
defineExpose({ openModal });
</script>

<style scoped lang="less">
</style>